<template>
  <div class="page page-test">
    <div class="title">我的VUE组件示例</div>
    <div class="sub-title">
      <a href="https://www.gitee.com/hainee" target="_blank">https://www.gitee.com/hainee</a>
    </div>
    <div class="sub-title">向右侧滑动返回路由</div>
    <button class="btn" @click="testShowChild">1、测试 vue-router-extensions</button>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: 'no message!',
      counter: 0
    }
  },
  methods: {
    testShowChild() {
      this.$router.showChild(
        {
          name: 'testShowChild',
          params: {
            counter: this.counter
          }
        },
        res => {
          setTimeout(() => {
            // 响应路由返回到home的回调
            res && this.$toast.center('return to home success!')
          }, 300)
        }
      )
    }
  }
}
</script>
<style scoped>
.page-test {
  margin: 10px;
}

.title,
.sub-title {
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}

.sub-title {
  font-size: 16px;
  height: 40px;
}

.btn {
  height: 40px;
}

.msg {
  font-size: 18px;
  display: flex;
  align-items: center;
  height: 50px;
}
</style>
